<template>
	<u-popup :show="show" @close="hide" closeOnClickOverlay :safeAreaInsetBottom="false">
		<sl-page class="material-select" :title="title" :backPage="false" @navbar:backPage="hide">
			<material-paths :path="path" />
			<view class="page__scroll">
				<view class="page__scroll--inner">
					<mescroll-uni ref="PageScroll" :fixed="false" @init="mescrollInit" @down="downCallback"
						:up="upOption" :down="downOption" @up="upCallback">
						<view class="page__loading" v-if="!initialize">
							<u-skeleton rows="5" title loading animate />
						</view>
						<view class="files clearfix padding">
							<material-file class="file" :material="item" v-for="(item, index) in datas" :key="index" />
						</view>
					</mescroll-uni>
				</view>
			</view>
			<view slot="actions" class="page__actions">
				<material-uploader class="flex-box" :type="type" :scene="scene" :folder="path.dir"
					@upload:end="downCallback" />
				<u-button type="error" text="确定选择" @click="emitSelected"></u-button>
			</view>
		</sl-page>
	</u-popup>
</template>

<script>
	import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
	import MaterialApi from '@/api/user/material';
	import MaterialUploader from './uploader';
	import MaterialPaths from './paths.vue';
	import MaterialFile from './file/index.vue'
	import Index from './index'
	export default {
		name: 'material-select',
		mixins: [Index],
		components: {
			MescrollUni,
			MaterialUploader,
			MaterialPaths,
			MaterialFile,
		},
		props: {
			title: {
				type: String,
				default: '请选择'
			},
			visible: {
				type: Boolean,
				default: false
			},
			scene: {
				type: String,
				default: 'Document'
			},
			type: {
				type: String,
				default: 'image'
			}
		},
		data() {
			return {
				show: false,
			}
		},
		watch: {
			visible: function() {
				this.show = this.visible;
				if (this.show) {
					this.init();
				}
			},
			show: function() {
				if (this.show) {
					this.bindEvent();
				} else {
					this.unBindEvent();
				}
			}
		},
		methods: {
			hide: function() {
				this.show = false;
				this.$emit('update:visible', false)
			},
			emitSelected: function() {
				let selection = this.selection;
				this.$emit('selection', selection);
				this.hide();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.files {
		.file {
			float: left;
		}
	}
</style>
